class lbt {
    constructor(el, options) {
        this.el = document.querySelector(el);
        this.num = 1;
        this.t = null;
        this.options = options
        this.init();
    }
    init() {
            this.uodataNode();
            // this.defaultConfig();
            this.autoImg();
            this.yq();
            this.yqOverOut();
            this.imgStop();
        }
    uodataNode() {
        this.imgS = this.el.querySelector("img");
        this.ulLi = this.el.querySelectorAll("ul li");

    }
    // defaultConfig() {
    //     this.ulLi.forEach((item) => {
    //         item.style.background = this.options.pifu
    //     })
    // }
    autoImg() {
        this.t = setInterval(() => {
            this.num++;
            if (this.num > 6) this.num = 1;
            this.imgS.src= `./imgs/img${this.num}.jpg`;
            this.yq();
        }, 500)
    }
    yq() {
        this.ulLi.forEach((item) => {
            item.className = "";
        })
        this.ulLi[this.num - 1].className = "active"
    }
    yqOverOut() {

        this.ulLi.forEach((item, index) => {
            item.onmouseover = () => {
                    clearInterval(this.t)
                    this.newMethod(index);//模板字符串拼接
                    let ulLi = this.el.querySelectorAll("ul li") 
                    this.el.querySelector('ul li.active').className = ''
                    ulLi[index].className = "active";
                }
            
            item.onmouseout = () => {
                this.autoImg();
                this.num = index + 1
            }
        })
    }
    newMethod(index) {
        this.el.querySelector("img").src = `./imgs/img${index + 1}.jpg`;
    }

    imgStop() {
        this.imgS.onmouseover = () => {
            clearInterval(this.t)
        }
        this.imgS.onmouseout = () => {
            this.autoImg()
        }
    }
}